<script setup lang="ts">

</script>
<template>
     <van-divider style="width: 80vw;">
                其他登录方式
            </van-divider>
            <div class="other-login">
                <div class="qq">
                    <div class="circle">
                        <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E8%B7%AF%E5%BE%84_u91.svg"
                            alt=""></img>
                    </div>
                    <span>QQ</span>
                </div>
                <div class="wb">
                    <div class="circle">
                        <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u103.svg"
                            alt=""></img>
                    </div>
                    <span>新浪微博</span>
                </div>
                <div class="user">
                    <div class="circle">
                        <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u99.svg"
                            alt=""></img>
                    </div>
                    <span>账号密码</span>
                </div>
            </div>
</template>
<style lang="scss" scoped>
.van-divider {
    margin-top: 40vw;
}

.other-login {

    display: flex;
    width: 80vw;
    justify-content: space-evenly;
}

.qq,
.wb,
.user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F7F7F7;
    position: relative;

    img {
        position: absolute;
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
    }
}
</style>